<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>Products</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<div th:include="css :: css"></div>
<!-- //animation-effect -->
</head>
	
<body>
<!-- header -->
<div th:include="/header :: header" ></div>
<!-- //header -->
<!-- breadcrumbs -->
	<div class="breadcrumbs">
		<div class="container">
			<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
				<li><a href="/index"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>主页</a></li>
				<li class="active">分类</li>
			</ol>
		</div>
	</div>
	<div class="products" id="content">
		<div class="container">
			<div class="col-md-4 products-left">
				<div class="categories animated wow slideInUp" data-wow-delay=".5s">
					<h3>分类</h3>
					<ul class="cate">
						<li v-for="item in categorylist"><a  v-on:click="findgoods(item.id)">{{item.name}}</a> </li>
					</ul>
				</div>
				<div class="new-products animated wow slideInUp" data-wow-delay=".5s">
					<h3>推荐商品</h3>
					<div class="new-products-grids">
					<div class="new-products-grids">
						<div class="row">
							                                  <!--v-if="index<=5"-->
							<div class="col-md-12 " v-for="(item,index)  in tuijian" >
								<div class="new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s">
									<div class="new-collections-grid1-image">
										<a href="javascript:alert('nishishei')" class="product-image"><img v-bind:src="item.prc" alt=" " class="img-responsive" /></a>
										<div class="new-collections-grid1-image-pos">
											<a v-on:click="gotosingle(item.id)" >去看看</a>
										</div>
									</div>
									<h4><a href="single.html">{{item.name}}</a></h4>
									<p>销量：{{item.salesVolume}} &nbsp; &nbsp;库存量：{{item.stock}}</p>
									<div class="new-collections-grid1-left simpleCart_shelfItem">
										<p><span class="item_price">	￥{{item.price}}</span><a class="item_add"  v-on:click="addcart(item.id) ">添加到购物车 </a></p>
									</div>
								</div>
							
							</div>

							<div class="clearfix"> </div>
						</div>
					</div>
					</div>
				</div>
			</div>
			<div class="col-md-8 products-right">
				<!--<div class="products-right-grid">-->
					<!--<div class="products-right-grids animated wow slideInRight" data-wow-delay=".5s">-->
						<!--<div class="sorting">-->
							<!--<select id="country" onchange="change_country(this.value)" class="frm-field required sect">-->
								<!--<option value="null">1-100</option>-->
								<!--<option value="null">100-200</option> -->
								<!--<option value="null">200-300</option>					-->
								<!--<option value="null">300-400</option>								-->
							<!--</select>-->
						<!--</div>-->
						<!--<div class="clearfix"> </div>-->
					<!--</div>-->
				<!--</div>-->
				<div class="products-right-grids-bottom">
					<div class="new-products-grids">
						<div class="row">
							                                  <!--v-if="index<=5"-->
							<div class="col-md-6 " v-for="(item,index)  in goodslist" >
								<div class="new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s">
									<div class="new-collections-grid1-image">
										<a href="javascript:alert('nishishei')" class="product-image"><img v-bind:src="item.prc" alt=" " class="img-responsive" /></a>
										<div class="new-collections-grid1-image-pos">
											<a v-on:click="gotosingle(item.id)" >去看看</a>
										</div>
									</div>
									<h4><a href="single.html">{{item.name}}</a></h4>
									<p>销量：{{item.salesVolume}} &nbsp; &nbsp;库存量：{{item.stock}}</p>
									<div class="new-collections-grid1-left simpleCart_shelfItem">
										<p><span class="item_price">	￥{{item.price}}</span><a class="item_add"  v-on:click="addcart(item.id)">添加到购物车 </a></p>
									</div>
								</div>
							
							</div>

							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<!--<nav class="numbering animated wow slideInRight" data-wow-delay=".5s">-->
				  <!--<ul class="pagination paging">-->
					<!--<li>-->
					  <!--<a href="#" aria-label="Previous">-->
						<!--<span aria-hidden="true">&laquo;</span>-->
					  <!--</a>-->
					<!--</li>-->
					<!--<li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>-->
					<!--<li><a href="#">2</a></li>-->
					<!--<li><a href="#">3</a></li>-->
					<!--<li><a href="#">4</a></li>-->
					<!--<li><a href="#">5</a></li>-->
					<!--<li>-->
					  <!--<a href="#" aria-label="Next">-->
						<!--<span aria-hidden="true">&raquo;</span>-->
					  <!--</a>-->
					<!--</li>-->
				  <!--</ul>-->
				<!--</nav>-->
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //breadcrumbs -->
<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="footer-logo animated wow slideInUp" data-wow-delay=".5s">
				<h2><a href="index.html">易购网<span>你得贴心小窝</span></a></h2>
			</div>
			<div class="copy-right animated wow slideInUp" data-wow-delay=".5s">
				<p>Copyright &copy; 2018</p>
			</div>
		</div>
	</div>
<!-- //footer -->
<script>
    var vm = new Vue({
        el: '#content',
        data: {
            categorylist:null,
            goodslist:null,
			tuijian: null
        },
        methods: {
            gotosingle: function (id) {
                // 方法内 `this` 指向 vm
                gotosingle(id);
            },
            addcart: function (id) {
                // 方法内 `this` 指向 vm
                addcart(id,1);
            },
            findgoods:function (id) {
                findgoods(id);
            }
        }
    })

    $.ajax({
    	url: '/category/find/all',
    	type: 'GET',
    })
    .done(function(res) {
    	console.log(res.obj)
    	vm.categorylist = res.obj
    	console.log("success");
    })
    .fail(function() {
    	console.log("error");
    })
    .always(function() {
    	console.log("complete");
    });

    $.ajax({
        url: '/goods/tuijain',
        type: 'GET',
    })
        .done(function(res) {
            console.log(res.obj)
            vm.tuijian = res.obj
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

    // getgoodslist (4);
    function getgoodslist (id) {
    	$.ajax({
    		url: '/goods/find/all',
    		type: 'GET',
    		data: {id: 'id'},
    	})
    	.done(function() {
    	console.log(res.obj)
    	vm.goodslist = res.obj
    	console.log("success");
    	})
    	.fail(function() {
    		console.log("error");
    	})
    	.always(function() {
    		console.log("complete");
    	});
    	
    }
    $.ajax({
        url: '/goods/find/all',
        type: 'GET',
    })
        .done(function(res) {
            console.log(res.obj)
            vm.goodslist = res.obj
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

    function findgoods(id) {
        $.ajax({
            url: '/goods/find/category/'+id,
            type: 'GET'
        }).done(function(res) {
                console.log(res.obj)
                vm.goodslist = res.obj
                console.log("success");
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    $("#myForm").submit(function(){
        $(this).ajaxSubmit({
            success: function (data) {
                console.log(data);
                vm.goodslist = data.obj;

            },
            error: function(err) {},
            clearForm: true
        });
        return false;   //阻止表单默认提交
    })
</script>
</body>
</html>